﻿<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>WMS图层</title>
	<style type="text/css">
		body{
			margin: 0;
			overflow: hidden;
			background: #fff;
		}
		#map{
			position: relative;
			height: 520px;
			border:1px solid #3473b7;
		}
        #mousePositionDiv{
            position: absolute;
            z-index: 99;
            left:0px;
            top:68px;
            font-family: Arial;
            font-size: smaller;
            text-align: left;
            width:360px;
        }
        .selectbtn{
            width:100px;
            font-size: small;
            font-family: Arial;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
	</style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
	<script type="text/javascript" src="../libs/SuperMap.Include.js"></script>
	<script type="text/javascript">
		var map, layer, wms1,wms2,wms3,wms4,newHtml ,projectionSelect,versionSelect, lastLayer,  mapDiv,
        host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
		var url1 = host+"/iserver/services/map-china400/wms130/China";
        var url2=host+"/iserver/services/map-china400/wms130/China_4326";
        var url3=host+"/iserver/services/map-china400/wms111/China";
        var url4=host+"/iserver/services/map-china400/wms111/China_4326";
		function init() {
			map = new SuperMap.Map('map', {
				controls: [new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation(),
					new SuperMap.Control.ScaleLine(),
                   new SuperMap.Control.LayerSwitcher()
					]});
            projectionSelect = document.getElementById("projectionSelect");
            versionSelect = document.getElementById("versionSelect");
            mapDiv=document.getElementById("map");

            switchProjection();
            setposition();
            addHandler(window,"resize",setposition);
		}
        function switchProjection(){
             if(lastLayer){
                map.removeLayer(lastLayer);
             }
             if(versionSelect.value=="1.3.0"){
                 if(projectionSelect.value=="3857"){
                     //设置layers图层名称必须是 GetCapabilities 操作返回的文档中声明的Name元素的值，地图图层之间以半角英文逗号进行分隔。最左边的图层在最底，下一个图层放到前一个的上面，依次类推。
                     //version，请求版本号。现支持”1.1.1”和”1.3.0”。
                     //设置地图的projection，最大显示范围bounds参数
                     //初始化WCS图层
                     wms1=new SuperMap.Layer.WMS("WMS1", url1, { layers: "China", version: '1.3.0' }, {projection:"EPSG:3857",maxExtent: new SuperMap.Bounds(-20037508.34 , -20037508.34,20037508.34 , 20037508.34 )});
                     switchLayer(wms1);
                 } else if(projectionSelect.value=="4326") {
                     wms2= new SuperMap.Layer.WMS("WMS2", url2, { layers: "China_4326", version: '1.3.0' }, {projection:"EPSG:4326",maxExtent: new SuperMap.Bounds(-180,-90,180,90)});
                     switchLayer(wms2);
                 }
             }else  if(versionSelect.value=="1.1.1"){
                 if(projectionSelect.value=="3857"){
                     wms3= new SuperMap.Layer.WMS("WMS3", url3, { layers: "China", version: '1.1.1' }, {projection:"EPSG:3857",maxExtent: new SuperMap.Bounds(-20037508.34 , -20037508.34,20037508.34 , 20037508.34 )});
                     switchLayer(wms3);
                 } else if(projectionSelect.value=="4326") {
                     wms4 =new SuperMap.Layer.WMS("WMS4",url4,{layers:"China_4326",version:'1.1.1'},{projection:"EPSG:4326",maxExtent: new SuperMap.Bounds(-180 , -90,180 , 90 )});
                     switchLayer(wms4);
                 }
             }
            document.getElementById("mousePositionDiv").innerHTML=newHtml;
        }

        function switchLayer(wms){
            map.addLayers([wms]);
            var center = new SuperMap.LonLat(0, 0);
            map.setCenter(center, 1);
            lastLayer=wms;
            mapDiv.focus();
            newHtml = "当前图层信息：<br>" +" 地图投影："+wms.projection+"<br> wms当前版本： " +wms.params.VERSION;

        }

        function addHandler(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            } else{
                element["on"+type] =handler;
            }
        }
        function setposition(){
            var width= map.getSize().w;
            document.getElementById("mousePositionDiv").style.left=width/2-100+"px" ;
        }
	</script>
</head>
<body onload="init()">
<div id="toolbar">
    <span style="margin-top: 15px">地图投影系：</span>
    <select id="projectionSelect"class="selectbtn"name="projectionSelect" onchange="switchProjection()" >
        <option value="3857">3857 </option>
        <option value="4326">4326 </option>
    </select>
    <span>wms版本：</span>
    <select id="versionSelect"class="selectbtn" name="versionSelect" onchange="switchProjection()">
        <option value="1.3.0">1.3.0 </option>
        <option value="1.1.1">1.1.1 </option>
    </select>
</div>
<div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
<div id="map"></div>
</body>
</html>
